import 'package:distribution_mall_flutter/constant/cf_constant.dart';
import 'package:distribution_mall_flutter/pages/home/widgets/home_goods/home_goods_provider.dart';
import 'package:distribution_mall_flutter/pages/home/widgets/tab.dart';
import 'package:distribution_mall_flutter/widgets/goods_item_card.dart';
import 'package:easy_refresh/easy_refresh.dart';
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:visibility_detector/visibility_detector.dart';

class HomeGoodsWidget extends ConsumerStatefulWidget {
  final String tag;
  final ScrollPhysics physics;
  final TabController? homeTabController;

  const HomeGoodsWidget(
      {super.key,
      required this.tag,
      required this.physics,
      this.homeTabController});

  @override
  ConsumerState<HomeGoodsWidget> createState() => _HomeGoodsWidgetState();
}

class _HomeGoodsWidgetState extends ConsumerState<HomeGoodsWidget> {
  @override
  Widget build(BuildContext context) {
    var homeGoodsProviderFor = homeGoodsProvider(widget.tag);
    final homeGoodsData =
        ref.watch(homeGoodsProviderFor.select((item) => item.data));
    ref.watch(homeGoodsStayProvider.select((item) => item.goodStayTime));
    return CustomScrollView(
      physics: widget.physics,
      slivers: [
        SliverPadding(
          padding: const EdgeInsets.only(
              left: EdgeConstant.edge146, right: EdgeConstant.edge146),
    // SliverMasonryGrid
          sliver: SliverAlignedGrid.count(
              mainAxisSpacing: 21.8,
              crossAxisSpacing: 9,
              crossAxisCount: 2,
              // staggeredTileBuilder: (int index) =>
              //     StaggeredTile.count(1, index.isEven ? 1.2 : 1),
              itemCount: homeGoodsData.length,
              itemBuilder: (BuildContext context, int index) {
                return VisibilityDetector(
                    key: Key('${homeGoodsData[index].refSaleItemId ?? index}'),
                    onVisibilityChanged: (VisibilityInfo info) {
                      int? i = widget.homeTabController?.index ?? 0;
                      if (tabName[i] == widget.tag &&
                          info.visibleFraction * 100 >= 100) {
                        ref
                            .read(homeGoodsStayProvider.notifier)
                            .setGoodStayTime(
                                homeGoodsData[index].refSaleItemId ?? '',
                                start: DateTime.now());
                      } else if (tabName[i] == widget.tag) {
                        ref
                            .read(homeGoodsStayProvider.notifier)
                            .setGoodStayTime(
                                homeGoodsData[index].refSaleItemId ?? '',
                                tag: widget.tag,
                                end: DateTime.now());
                      }
                    },
                    child: EPGoodsItemCard(
                      data: homeGoodsData[index],
                      index: index,
                      tag: widget.tag,
                      key: Key(homeGoodsData[index].saleUnitId!),
                    ));
              }),
        ),
        const FooterLocator.sliver(),
      ],
    );
  }
}
